<template>
	<swiper
		class="search-word-swiper"
		vertical
		circular
		autoplay
		@change="wordChange">
		<swiper-item class="search-word-swiper-item main-flex" v-for="(item, index) in hotWords" :key="index">
			<text class="search-word-swiper-item-text">{{ item }}</text>
		</swiper-item>
	</swiper>
</template>

<script setup>
  import useSetStore from "@/store/modules/set"
	import { sysProperties } from "@/api/system/common"
  import { computed, ref } from 'vue'
		const setStore = useSetStore()
		const emits = defineEmits(['change'])
  	const hotWords = computed(() => {
			const wordList = setStore?.sys?.hot_words ? setStore.sys.hot_words : []
			if (wordList.length > 0) {
				emits('change', wordList[0])
			}
			return wordList
		})
  	const wordChange = (e) => {
			emits('change', hotWords.value?.[e.detail.current] || '')
  	}
</script>

<style lang="scss" scoped>
  .search-word-swiper {
  	width: 100%;
  	height: 100%;
  	&-item {
  		width: 100%;
  		height: 100%;
  		&-text {
  			font-size: 26rpx;
  			color: $text-light;
  		}
  	}
  }
</style>
